import React, { useEffect } from "react"
import { Input, Textarea, View } from "@tarojs/components"
import GpContainer from "@/components/GpContainer"
import Taro, { useRouter } from "@tarojs/taro"
import { useSetState } from "@/utils/hooks"
import styles from "./index.module.scss"
import Icon from "@/components/GpFontIcon"
import { publishNote, quickSearchTopic } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"

type IState = {
  title: string
  content: string
  currentTopic: IOptionLike<number> | null
}
type IParams = {
  /** 话题id */
  topicId: string
}
export default function ShortComment() {
  const router = useRouter<IParams>()
  const [state, setState] = useSetState<IState>({
    title: "",
    content: "",
    currentTopic: null
  })
  useEffect(() => {
    if (router.params.topicId) {
      quickSearchTopic({
        defaultValues: [Number(router.params.topicId)],
        top: 1
      }).then(res => {
        if (requestIsFullfilled(res)) {
          setState({
            currentTopic: res.data.data[0]
          })
        }
      })
    }
  }, [router.params])
  function handlePublish() {
    if (!state.content) {
      Taro.showToast({
        title: "请输入评论内容",
        icon: "none"
      })
      return
    }
    const params: IApiRelative.IPublishNote.IParams = {
      content: state.content
    }
    if (state.title) {
      params.title = state.title
    }
    if (router.params.topicId) {
      params.discussionId = Number(router.params.topicId)
    }
    Taro.showLoading({ title: "提交中..." })
    publishNote(params)
      .then(res => {
        Taro.hideLoading()
        if (requestIsFullfilled(res)) {
          Taro.showToast({
            title: "发布成功",
            icon: "none"
          })
          Taro.navigateBack()
        }
      })
      .catch(() => {
        Taro.hideLoading()
      })
  }
  return (
    <GpContainer className={styles.container}>
      <View className={styles.titleWrap}>
        <Input
          value={state.title}
          onInput={ev => setState({ title: ev.detail.value })}
          className={styles.titleInput}
          placeholder="填写标题（选填）"
          placeholderClass={styles.titlePlaceholder}
        />
      </View>
      <View className={styles.textContainer}>
        <Textarea
          value={state.content}
          onInput={ev => setState({ content: ev.detail.value })}
          placeholder="填写正文，和大家分享一下吧！"
          className={styles.textArea}
          placeholderClass={styles.textAreaPlaceholder}
        />
      </View>
      <View className="p-32px box-border flex flex-row justify-between items-center">
        <View className="text-bold text-28px flex-none">
          <Icon icon="icon-huati3" size={28} color="#333333" className="inline-block mr-8px" />
          所属话题:
        </View>
        <View className="text-bold text-28px flex-1 w-0 truncate text-right">
          {state.currentTopic?.label}
        </View>
      </View>
      <View className={styles.actionBtn}>
        <View
          className="w-598px h-88px box-border flex flex-row justify-center items-center rounded-44px bg-primary text-32px text-white font-500"
          onClick={handlePublish}
        >
          提交
        </View>
      </View>
    </GpContainer>
  )
}
